<!DOCTYPE html>
<!-- saved from url=(0055)http://localhost:40001/shoppingsingle/ddCategorysInfo/1 -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <head>
        <meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
        <title>小米商城</title>
        <link rel="stylesheet" type="text/css" href="/css/style.css">

        <!--引入axios框架-->
        <script src="/js/axios.min.js"></script>
        <!--引入Vue框架-->
        <script src="/js/vue.js"></script>
    </head>
</head>
<body>
<!-- start header -->
<header>
    <div class="top center">
        <div class="left fl">
            <ul>
                <li><a href="http://localhost:40001/views/index.html" target="_blank">小米商城</a></li>
                <li>|</li>
                <li><a href="">MIUI</a></li>
                <li>|</li>
                <li><a href="">米聊</a></li>
                <li>|</li>
                <li><a href="">游戏</a></li>
                <li>|</li>
                <li><a href="">多看阅读</a></li>
                <li>|</li>
                <li><a href="">云服务</a></li>
                <li>|</li>
                <li><a href="">金融</a></li>
                <li>|</li>
                <li><a href="">小米商城移动版</a></li>
                <li>|</li>
                <li><a href="">问题反馈</a></li>
                <li>|</li>
                <li><a href="">Select Region</a></li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="right fr">
            <a href="/views/gouwuche">
                <div class="gouwuche fr">购物车</div>
            </a>
            <div class="fr">
                <ul>
                    <li><a href="/views/login.html" target="_blank">登录</a></li>
                    <li>|</li>
                    <li><a href="/views/register.html" target="_blank">注册</a></li>
                    <li>|</li>
                    <li><a href="/views/dingdanzhongxin.html">订单中心</a></li>
                    <li>|</li>
                    <li><a href="/views/self_info.html">个人中心</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</header>
<!--end header -->
<div id="app">
<!-- start banner_x -->
<div class="banner_x center">
    <a href="http://localhost:40001/views/index.html" target="_blank">
        <div class="logo fl"></div>
    </a>
    <a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/1">
        <div class="ad_top fl"></div>
    </a>

    <div id="kind" class="nav fl">
        <ul>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/1" target="_blank">小米手机</a></li>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/2" target="_blank">红米手机</a></li>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/3" target="_blank">平板·笔记本</a></li>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/4" target="_blank">电视</a></li>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/5" target="_blank">路由器</a></li>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/6" target="_blank">家电</a></li>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/7" target="_blank">服务</a></li>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/8" target="_blank">社区</a></li>
            <li><a href="http://localhost:40001/shoppingsingle/ddCategorysInfo/9" target="_blank">电风扇</a></li>
        </ul>
    </div>

    <div class="search fr">
        <form>
            <div class="text fl">
                <input v-model="keyword" type="text" class="shuru" placeholder="小米6">
            </div>
            <div class="submit fl">
<!--                <input @click.prevent="searchKey()"  type="submit" class="sousuo" value="搜索">-->
                <button type="submit" @click.prevent="searchKey" class="sousuo">搜索</button>
            </div>
            <div class="clear"></div>
        </form>
        <div class="clear"></div>
    </div>

</div>

<div id="list" class="danpin center">
    <div class="biaoti center"></div>
    <div class="main center">
        <div v-for="result in results"
            onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'"
            class="mingxing fl mb20" style="border: 2px solid rgb(255, 255, 255); width: 230px; cursor: pointer;">
            <div class="sub_mingxing">
                <a href="/shoppingsingle/ddKindType/tansTo/1">
                    <img :src="result.pdImage" alt="">
                </a>
            </div>
            <div class="pinpai">
                <a href="/shoppingsingle/ddKindType/tansTo/1" >{{result.pdName}}</a>
            </div>
            <div class="youhui">{{result.advantage}}</div>
            <div class="jiage">{{result.promotion}}</div>
        </div>

        <div class="clear"></div>
    </div>
    <div class="main center mb20">
        <div class="clear"></div>
    </div>
</div>
</div>
<br>
<br>
<br>
<hr>
<div>
<footer class="mt20 center">
    <div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
    <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div>
    <div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>

</footer>
</div>
<!-- end danpin -->

<script src="./js/common.js"></script>
<script src="./js/liebiao.js"></script>
<script src="/js/index.js"></script>
<script src="/js/common.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    window.onload=function(){
        new Vue({
            el: '#app',
            data: {
                keyword: '',
                results: []
            },
            methods: {
                searchKey: function () {
                    var keyword = this.keyword;
                    console.log(keyword);
                    if(keyword==null || keyword.length == 0){
                        keyword = "小米";
                    }
                    // 对接后端的接口
                    axios.get('search/' + keyword + "/1/20").then(response => {
                        var data = response.data.data;
                        console.log(data);
                        //绑定数据
                        this.results = data;
                    })
                }
            }
        })
    }
</script>
</body>
</html>